<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="001.css">
  </head>
  <body>
    <div class="container">
      <header>
        <hgroup>
          <h1>主标题</h1>
          <h2>副标题</h2>
        </hgroup>
        <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
        </p>
      </header>
      <nav>
        <ul>
          <li><a href="#" id="1">主页</a></li>
          <li><a href="#" id="2">产品</a></li>
          <li>
            <a href="#" id="3">项目</a>
            <ul>
              <li>
                <a href="#">Node.js</a>
                <span> >> </span>
                <ul>
                  <li><a href="#">三级菜单111</a></li>
                  <li><a href="#">三级菜单111</a></li>
                  <li><a href="#">三级菜单111</a></li>
                </ul>
              </li>
              <li>
                <a href="#">three.js</a>
                <span> >> </span>
                <ul>
                  <li><a href="#">三级菜单222</a></li>
                  <li><a href="#">三级菜单222</a></li>
                  <li><a href="#">三级菜单222</a></li>
                </ul>
              </li>
              <li>
                <a href="#">CQRS.js</a>
                <span> >> </span>
                <ul>
                  <li><a href="#">三级菜单333</a></li>
                  <li><a href="#">三级菜单333</a></li>
                  <li><a href="#">三级菜单333</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#" id="4">关于我们</a></li>
        </ul>
      </nav>
      <div class="main">
        <section class="product-list">
          <h1>产品展示</h1>
          <div class="product">
            <h4>产品名称</h4>
            <img src="001.jpg" alt="">
            <p>产品描述</p>
          </div></section>

      </div>
      <footer></footer>
      <script type="text/javascript">
        const pdom = document.querySelector(".product");
        const productListDom = document.querySelector(".product-list");
        for(let i=0; i<20;i++){
          productListDom.insertAdjacentHTML("beforeEnd",pdom.outerHTML);
        }

        const li2 = document.querySelector(".container > nav > ul > li > ul");
        function clickme(){
          li2.style.display = "block";
        }
        function clickmeagain(){
          li2.style.display = "none";
        }
        const ul2 = document.querySelector(".container > nav > ul > li:nth-child(3)");//添加事件监听器，当点击时会显示二级菜单。
        ul2.addEventListener("mouseup",clickme);
        document.getElementById("1").addEventListener("mouseup",clickmeagain);
        document.getElementById("2").addEventListener("mouseup",clickmeagain);
        document.getElementById("4").addEventListener("mouseup",clickmeagain);

        const li31 = document.querySelector(".container > nav > ul > li > ul > li:nth-of-type(1)>ul");
        function clickme01(){
          li31.style.display = "block";
        }
        function clickmeagain01(){
          li31.style.display = "none";
        }
        const li32 = document.querySelector(".container > nav > ul > li > ul > li:nth-of-type(2)>ul");
        function clickme02(){
          li32.style.display = "block";
        }
        function clickmeagain02(){
          li32.style.display = "none";
        }
        const li33 = document.querySelector(".container > nav > ul > li > ul > li:nth-of-type(3)>ul");
        function clickme03(){
          li33.style.display = "block";
        }
        function clickmeagain03(){
          li33.style.display = "none";
        }

        document.querySelector(".container > nav > ul >li >ul >li:nth-child(1)").addEventListener("mouseup",clickme01);
        document.querySelector(".container > nav > ul >li >ul >li:nth-child(1)").addEventListener("mouseup",clickmeagain02);
        document.querySelector(".container > nav > ul >li >ul >li:nth-child(1)").addEventListener("mouseup",clickmeagain03);

        document.querySelector(".container > nav > ul >li >ul >li:nth-child(2)").addEventListener("mouseup",clickme02);
        document.querySelector(".container > nav > ul >li >ul >li:nth-child(2)").addEventListener("mouseup",clickmeagain01);
        document.querySelector(".container > nav > ul >li >ul >li:nth-child(2)").addEventListener("mouseup",clickmeagain03);

        document.querySelector(".container > nav > ul >li >ul >li:nth-child(3)").addEventListener("mouseup",clickme03);
        document.querySelector(".container > nav > ul >li >ul >li:nth-child(3)").addEventListener("mouseup",clickmeagain01);
        document.querySelector(".container > nav > ul >li >ul >li:nth-child(3)").addEventListener("mouseup",clickmeagain02);

      </script>
    </div>
  </body>
</html>
